<template>
	<view class="conter">
		<header-box :title="title"></header-box>

		<view class="conter-text">
			<view class="bgc">
				<navigator url="/#" class="text-heig" @click="showNum1 = true">
					<text>选择类型</text>
					<view class="" style=" font-size: 24rpx;">
						{{classInit}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</navigator>
				<view class="text-heig" @click="show = true">
					<text>日期</text>
					<view class="" style=" font-size: 24rpx;">
						{{dataTime}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view v-if="showPropText" class="text-heig" @click="show1 = true">
					<text>归还日期</text>
					<view class="" style=" font-size: 24rpx;">
						{{putTime}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<navigator url="/pages/putStock/danweiList" class="text-heig">
					<!-- <text v-if="nitName === '' ">往来单位</text>
					<text v-if="nitName !== '' ">{{nitName}}</text> -->
					<text>借出单位</text>
					<view class="" style=" font-size: 24rpx;">
						{{nitName}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</navigator>
				<!-- <view class="text-heig" @click="showNum = true">
					<text>数量</text>
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view> -->
				<!-- <navigator  url="/pages/shopping/select" class="text-heig">
					<text>{{monad}}</text>
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</navigator> -->
				<navigator url="/pages/shopping/stock" class="text-heig">
					<text>仓库</text>
					<view class="" style=" font-size: 24rpx;">
						{{stockName}}
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</navigator>
				<!-- <navigator url="/pages/shopping/classShopp" class="text-heig">
					<text>分类</text>
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</navigator> -->


				<view class="text-heig" @click="showNum = true">
					<text>备注</text>
					<text style="color: #999999; font-size: 30rpx;">{{memo ? memo : '请输入备注'}}</text>
				</view>


				<!-- <view class="left-box">
					<text>入库图片</text>
					<view class="" style="margin-top: 20rpx;">
						<u-upload :action="action" @on-success="uploadImage" width="200rpx" height="200rpx" :file-list="fileList"></u-upload>
					</view>
				</view> -->
			</view>


			<view class="box-top flex-around">
				<navigator url="/pages/putStock/list" class="">
					选择商品
				</navigator>

			</view>



			<view class="bgc" style="margin-top: 30rpx;">
				<view class="boc-bott" v-for="(item, index) in godList" :key="index" @tap="removeShopping(item.id)">
					<view class="lin-heig flex-box">
						<view class="flex-center">
							<view class="" style="width: 90rpx; height: 90rpx;">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="" style="font-size: 28rpx;color: #000000;font-weight: 700;margin-left: 10rpx;">
								<!-- <text style="font-weight: 500;">盘点商品：</text> -->
								{{item.name}}
							</view>
						</view>
						<view class="">
							<view class="" style="font-size: 24rpx;">
								数量：
								{{item.num}} {{item.unit}}
							</view>
						</view>
					</view>
					<!-- <view class="flex-box" style="height: 60rpx;line-height: 60rpx;" v-for="(item1,ind) in item.goods" :key="ind">
						<view class="">
							数量: {{item1.num}}个
						</view>
						<view class="">
							{{item1.name}}
						</view>
					</view> -->
				</view>
			</view>

		</view>

		<view class="add bg-gradual-green" @click="addGoods">
			确定
		</view>








		<!-- 数量 -->
		<u-popup v-model="showNum" mode="center" width="500rpx" height="280rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				备注
			</view>
			<view class="" style="padding: 0 40rpx; height: 60rpx; line-height: 60rpx;">
				<input type="text" v-model="memo" style="text-align: center;background-color: #F0F0F0; height: 100%;"
					placeholder="请输入内容" placeholder-style="text-align:center;" />
			</view>
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="showNum = false">
					确定
				</view>
			</view>
		</u-popup>



		<!-- 借出类型 -->
		<u-popup v-model="showNum1" mode="center" width="500rpx" height="280rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				选择类型
			</view>
			<view class="box-radio">
				<u-radio-group v-model="value" @change="radioGroup">
					<u-radio v-for="(item, index) in stockList" :key="index" :name="item" :disabled="item.disabled">
						{{item.elest}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum1 = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="typeText">
					确定
				</view>
			</view>
		</u-popup>

		<!-- 借出类型 -->
		<u-popup v-model="showNum2" mode="center" width="500rpx" height="280rpx" border-radius="14">
			<view class=""
				style="width: 100%; height: 100rpx; line-height: 100rpx;text-align: center; font-size: 30rpx;">
				确定移除
			</view>
			<view class="box-btn">
				<view class="back" style="background-color: #CCCCCC; color: #FFFFFF;" @click="showNum1 = false">
					取消
				</view>
				<view class="back bg-gradual-green" @click="removeId">
					确定
				</view>
			</view>
		</u-popup>



		<!-- 日历弹层 -->
		<u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
		<u-picker mode="time" v-model="show1" :params="params" @confirm="confirm1"></u-picker>

	</view>
</template>

<script>
	import headerBox from '../../components/header/header.vue'
	export default {
		components: {
			headerBox
		},
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				action: this.$IMG_URL,
				title: '添加出库单',
				showNum: false,
				showNum1: false,
				showNum2: false,
				show: false,
				show1: false,
				mode: 'date',
				stockList: [{
						name: '1',
						disabled: false,
						elest: '借出',
					},
					{
						name: '2',
						disabled: false,
						elest: '售出',
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				stock: '1',
				listFrom: [{
					text: '喜之郎果冻',
					data: '2021-03-24',
					unm: '30',
				}, {
					text: '杯子',
					unm: '30',
					data: '2021-03-24',
				}, {
					text: '杯子',
					unm: '30',
					data: '2021-03-24',
				}, ],
				searchVal: '',
				nitName: '',
				monad: '单位',
				stockName: '',
				typeName: '',
				classInit: '类型',
				init: '',
				stockId: '',
				pathImage: '',
				turnover_id: '', // 入库类型ID
				textInput: '', // 输入的备注
				page: 1,
				rows: 10,
				memo: '',
				goodsList: [],
				dataTime: '请选择时间',
				putTime: '请选择归还时间',
				godList: [],
				danweiID: '',
				stockId: '',
				navigatorProp: false,
				showPropText: false,
				showProp: '',
				shoppingId: '',
			}
		},
		onLoad(e) {
			this.stock = e.item
			this.nitName = e.name
			
			// this.searchVal = ''
			// this.nitName = '往来单位'
			console.log('this.searchVal', e, this.nitName)
			this.getList()
		},
		onShow(e) {
			// console.log('单位名字', this.searchVal)
			// console.log('单位', this.init)
			// console.log('单位danweiID', this.danweiID)
			// console.log('单位stockId', this.stockId)
			// console.log('仓库', this.stockId)
			// console.log('仓库stockName', this.stockName)
			// console.log('仓库111', this.monad)
			console.log('godList', this.godList)
			this.nitName = this.searchVal.name
			// this.godList = JSON.parse(this.goodsList)


		},
		methods: {

			removeId(id) {
				this.godList.forEach((item, index, j) => {
					if (item.id == this.shoppingId) {
						this.godList.splice(index, 1)
					}
				})

				this.showNum2 = false
			},


			// 移除商品
			removeShopping(id) {
				this.shoppingId = id
				this.showNum2 = true
			},

			async getList() {
				if (this.stock == '1') {
					const {
						data: res
					} = await this.$u.post("api/jinxiao.Enter/index", {
						page: this.page,
						rows: this.rows,
					});

					this.listFrom = res.list
					console.log('入库单', res.list)
				}
				if (this.stock == '2') {
					this.navigatorProp = '1'
					const {
						data: res
					} = await this.$u.post("api/jinxiao.Back/index", {
						page: this.page,
						rows: this.rows,
					});

					this.listFrom = res.list
					console.log('出库单', res.list)
				}
			},


			// 添加商品
			async addGoods() {
				if (this.stockId == '' || this.turnover_id == '' || this.danweiID == '') return this.$tools.msg(
					'内容不能为空!')
				if (this.godList.length == 0) return this.$tools.msg('商品不能为空!')
				this.godList.forEach((item, index, j) => {
					delete item.name
					delete item.image
					delete item.unit
				})
				const res = await this.$u.post("api/jinxiao.Back/add", {
					store_id: this.stockId,
					turnover_id: this.turnover_id,
					company_id: this.danweiID, // 往来单位
					goods: JSON.stringify(this.godList),
					memo: this.memo,
					backtime: this.putTime,
					time: this.dataTime,
					// image: this.pathImage,
				});
				if (res.code != '1') return this.$tools.msg(res.msg)
				this.$tools.msg(res.msg)
				uni.navigateTo({
					url: '/pages/tab/index'
				})

			},

			typeText() {
				this.showNum1 = false
			},


			// 上传图片
			uploadImage(e) {
				this.pathImage += e.data + ','
				console.log('上传图片,', this.pathImage)
			},


			change(e) {
				console.log(e);
			},

			confirm(e) {
				this.dataTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},

			confirm1(e) {
				this.putTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},


			// 选中任一radio时，由radio-group触发
			radioGroup(e) {
				console.log('由radio-group触发', e);
				if (e.name == '1') {
					this.navigatorProp = '4'
					this.showProp = '3'
					this.classInit = e.elest
					this.showPropText = true
					this.dataTime = '请选择' + e.elest + '时间'
				} else if (e.name == '2') {
					this.navigatorProp = '1'
					this.classInit = e.elest
					this.showPropText = false
					this.dataTime = '请选择' + e.elest + '时间'
				}
				this.turnover_id = e.name
				this.showNum1 = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		// height: 100%;
		margin-bottom: 200rpx;
		position: relative;
		margin-bottom: 240rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.conter-text {
		padding: 30rpx;

		.bgc {
			width: 100%;
			// height: 200rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.text-heig {
				height: 108rpx;
				line-height: 108rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #F0F0F0;
			}


			.left-box {
				height: 310rpx;
				padding-top: 30rpx;

				/deep/.u-list-item.data-v-3d60ab68 {
					margin: 0 !important;
				}
			}


			.shop-heig {
				height: 144rpx;
				padding-top: 40rpx;

				view {
					margin-top: 24rpx;
					border-bottom: 1rpx solid #F0F0F0;
				}
			}
		}

		.box-top {
			color: #333333;
			margin-top: 30rpx;

			navigator {
				width: 40%;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #FFFFFF;
				border-radius: 35rpx;
				text-align: center;
			}
		}
	}

	.add {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		transform: translateX(-50%);
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
	}


	.box-btn {
		height: 100rpx;
		width: 90%;
		margin: 30rpx auto 30rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;

		.back {
			width: 40%;
			height: 60rpx;
			border-radius: 30rpx;
			line-height: 60rpx;
			text-align: center;
		}

		view:last-child {
			border-right: 0;
		}
	}


	.box-radio {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-around;
	}




	.boc-bott {
		border-bottom: 1rpx solid #F0F0F0;

		.lin-heig {
			height: 120rpx;
		}
	}

	.boc-bott:last-child {
		border-bottom: 0;
	}
</style>
